<template>
    <rx-layout class="rx-sys-transfer-setting-mgr">
        <template #left>
            <rx-vue-tree
                style="margin-top: 10px"
                ref="rxTree"
                url="/api-system/system/core/sysTransferSetting/jsonAll"
                @rowClick="selectTransfer"
                label="name"
                :single="true"
                field="id"
                idField="id"
            />
        </template>
        <template #middle>
            <rx-fit v-model="fitSearch">
                <template #head>
                    <div class="table-page-search-wrapper" style="padding:10px">
                        <a-form layout="vertical" >
                            <a-row :gutter="24" style="width: 100%">
                                <a-col :span="8">
                                    <a-form-item :label="i18n('form.transferor','权限转移人') + ':'">
                                        <rx-input-button :singleValue="false" ref="userIdEditA"
                                                         @btnClick="selectUser($event,'userIdEditA')"></rx-input-button>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-item :label="i18n('form.transfer','转移到：')">
                                        <rx-input-button :singleValue="false" ref="userIdEditB"
                                                         @btnClick="selectUser($event,'userIdEditB')"></rx-input-button>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6" >
                                    <div class="x-sys-transfer-btn">
                                      <span class="table-page-search">
                                        <a-button @click="onOk" type="primary">{{ $ti18('rxForm.okBtn', '确定') }}</a-button>
                                      </span>
                                    </div>
                                </a-col>
                            </a-row>
                        </a-form>
                    </div>
                </template>
                <template #middle>
                    <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="editPane" :hideAdd="true">
                        <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" forceRender>
                            <rx-grid :ref="'table_'+pane.key"
                                     :hasPage="true"
                                     :urlConfig="urlConfig"
                                     :selectConfig="selectConfig"
                                     :columns="pane.columns"
                                     :url="pane.url"
                            ></rx-grid>
                        </a-tab-pane>
                    </a-tabs>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import {RxLayout, RxFit} from '@lowcode/jpaas-base-lib';
import {ShareDialog} from '@lowcode/jpaas-share-component';
import SysTransferSettingApi from "@/common/api/system/sysTransferSetting"

export default {
    name: "SysTransferSettingMgr",
    components: {
        RxLayout,
        RxFit,
    },
    data() {
        return {
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox',
            },
            activeKey: "",
            panes: [],
            userIdEditA: "",
            userIdEditB: "",
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "SysTransferSetting", key);
        },
        editPane(targetKey, action) {
            if (action == 'remove') {
                for (var i = 0; i < this.panes.length; i++) {
                    var pane = this.panes[i];
                    if (pane.key == targetKey) {
                        this.panes.splice(i, 1);
                    }
                }
            }
        },
        selectTransfer(tree) {
            var id = tree.id;
            if (!id) return;
            var authorId = this.userIdEditA;
            if (!authorId) {
                this.$message.error(this.i18n('msa.selectPerson', '请选择权限转移人'));
                return;
            }
            SysTransferSettingApi.excuteSelectSql(id, authorId).then(json => {
                if (json.columns.length <= 1) {
                    this.$message.error(this.i18n('msa.noAuthority', '此权限转移人没有可转移的权限'));
                    return;
                }
                for (var i = 0; i < this.panes.length; i++) {
                    var pane = this.panes[i];
                    if (json.id == pane.key) {
                        this.$refs['table_' + pane.key][0].loadData();
                        this.activeKey = pane.key;
                        return;
                    }
                }
                let _colArr = [];
                let _column = [...json.columns];
                for (let item of _column) {
                    let _obj = {...item};
                    _obj.minWidth = Number(_obj.minWidth);
                    _colArr.push(_obj);
                }
                this.panes.push({
                    title: json.name,
                    key: json.id,
                    columns: _colArr,
                    setId: id,
                    url: '/api-system/system/core/sysTransferSetting/excuteSelectSqlData?id=' + id + '&authorId=' + authorId
                });
                this.activeKey = json.id;
            })
        },
        onOk() {
            var authorId = this.userIdEditA;
            if (!authorId) {
                this.$message.error(this.i18n('msa.selectPerson', '请选择权限转移人'));
                return;
            }
            var targetAuthorId = this.userIdEditB;
            if (!targetAuthorId) {
                this.$message.error(this.i18n('msa.selectTarget', '请选择目标人'));
                return;
            }

            var setId;
            for (var i = 0; i < this.panes.length; i++) {
                var pane = this.panes[i];
                if (this.activeKey == pane.key) {
                    setId = pane.setId;
                    break;
                }
            }
            if (!setId) {
                this.$message.error(this.i18n('msa.selectType', '请选择要转移的权限类型'));
                return;
            }
            var table = this.$refs['table_' + this.activeKey][0];
            var rows = table.getSelectedRows();
            if (!rows || rows.length == 0) {
                this.$message.error(this.i18n('msa.permiss', '请选择要转移的权限'));
                return;
            }

            SysTransferSettingApi.excuteUpdateSql({
                id: setId, authorId: authorId, targetPersonId: targetAuthorId, selectedItem: JSON.stringify(rows)
            }).then(res => {
                table.loadData();
            })
        },
        selectUser(vm, key) {
            let self = this;
            ShareDialog.openUserDialog({
                curVm: this, data: {single: true}, widthHeight: ['1300px', '600px']
            }, function (data) {
                self[key] = data.userId;
                vm.setVal(data.userId, data.fullName);
            })
        }
    }
}
</script>

<style scoped>

.x-sys-transfer-btn{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

</style>
